<template>
  <div class="cs-page-container containerDataCore">
    <el-card class="card-box">

      <div class="page-line-chart">
        <h2>注册用户统计:</h2>
        <ve-line :data="chartData" style="margin-top: 40px;"></ve-line>
      </div>

      <el-button type="primary" @click="handleRefresh">刷新数据</el-button>
      <h2>今日新增与活跃:</h2>
      <div class="boxs">
        <div class="box">
          <span>Android</span>
          <span
            >注册: <b>{{ andRegister || 0 }}</b></span
          >
          <span
            >活跃: <b>{{ andActive || 0 }}</b></span
          >
        </div>
        <div class="box">
          <span>iOS</span>
          <span
            >注册: <b>{{ iosRegister || 0 }}</b></span
          >
          <span
            >活跃: <b>{{ iosActive || 0 }}</b></span
          >
        </div>
        <div class="box">
          <span>用户</span>
          <span
            >注册: <b>{{ userNum || 0 }}</b></span
          >
          <span
            >活跃: <b>{{ userActive || 0 }}</b></span
          >
        </div>
        <div class="box">
          <span>占卜师</span>
          <!-- <span>注册:<b>{{advisorNum}}</b></span> -->
          <span
            >活跃: <b>{{ advisorActive || 0 }}</b></span
          >
        </div>
      </div>
      <h2>今日付费与收益:</h2>
      <div class="boxs">
        <div class="box pay">
          <span></span>
          <span
            >充值: <b>{{ recharge || 0 }}</b> ($)</span
          >
        </div>
        <div class="box pay">
          <span></span>
          <span
            >消耗: <b>{{ consume || 0 }}</b> (crystal)</span
          >
        </div>
      </div>
      <h2>今日订单:</h2>
      <div class="orderBoxs">
        <div class="order">
          <!-- <div v-for="(item, index) in order" :key="index"> -->
          <div class="type">
            离线纯文字订单: <b>{{ order1 || 0 }}</b>
          </div>
          <div class="type">
            离线音频订单: <b>{{ order2 || 0 }}</b>
          </div>
          <div class="type">
            离线视频订单: <b>{{ order3 || 0 }}</b>
          </div>
        </div>
        <div class="order">
          <div class="type">
            实时纯文字聊天订单: <b>{{ order4 || 0 }}</b>
          </div>
          <div class="type">
            实时音频聊天订单: <b>{{ order5 || 0 }}</b>
          </div>
          <div class="type">
            实时视频聊天订单: <b>{{ order6 || 0 }}</b>
          </div>
        </div>
        <div class="order">
          <div class="type">
            仪式订单: <b>{{ order7 || 0 }}</b>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dataTodayApi } from '@api/tarot'
import { registerStatisticsApi } from '@api/tarot'
import { dateDifference } from '@/filters';

export default {
  components: {},
  props: {},
  data() {
    return {
      // deviceRegister: [], // 设备注册 deviceType 0是Android  1是iOS
      // deviceActive: [], // 设备活跃
      // register: [], // 用户注册 userType 1是用户 2是占卜师
      // active: [], // 用户活跃
      recharge: null,
      consume: null,
      order: [],
      andRegister: null,
      iosRegister: null,
      andActive: null,
      iosActive: null,
      userNum: null, //用户数量
      advisorNum: null, //占卜师数量
      userActive: null, //用户数量
      advisorActive: null, //占卜师数量
      order1: '',
      order2: '',
      order3: '',
      order4: '',
      order5: '',
      order6: '',
      order7: '',

      itemMap: {},

      param: {
        offset: 0,
        limit: 10000,
        startTime: null,
        endTime: null
      },

      chartData: {
        columns: ["日期", "com.client.tarot.android", "com.innerecho.poptown", "com.astroecho.client"],
        rows: []
      }
    }
  },
  created() {

    // 七天前到今天
    const today = new Date()
    const startDay = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 15)

    this.param.endTime = today.getFullYear() + '-' +(today.getUTCMonth() + 1) + '-' + today.getUTCDate()
    this.param.startTime = startDay.getFullYear() + '-' + (startDay.getUTCMonth() + 1)  + '-' + startDay.getUTCDate()

    this.fetchData()
  },
  mounted() {},
  methods: {

    // 刷新按钮
    handleRefresh() {
      this.fetchData()
    },
    
    settleDataByDate(res, index, map, key) {
      if(res.data.list[index].appName == key) {
        const dateStr = res.data.list[index].targetDate.slice(0, 10)
        if(map[dateStr] == null) {
          map[dateStr] = {}
          if(map[dateStr][key] != null) {
            map[dateStr][key] = map[dateStr][key] + res.data.list[index].count
          } else {
            map[dateStr][key] = res.data.list[index].count
          }
          map[dateStr][key] = res.data.list[index].count
        } else {
          if(map[dateStr][key] != null) {
            map[dateStr][key] = map[dateStr][key] + res.data.list[index].count
          } else {
            map[dateStr][key] = res.data.list[index].count
          }
        }
      } 
    },

    // 获取数据
    fetchData() {

      registerStatisticsApi(this.param).then(res => {
        console.log(res.data.list)

      // 设置曲线的每一个日期
        const diff = dateDifference(this.param.endTime, this.param.startTime)
        this.chartData.rows = []

        //整理数据
        for(var i = 0; i < res.data.list.length; i++) {
          this.settleDataByDate(res, i, this.itemMap, "com.client.tarot.android")
          this.settleDataByDate(res, i, this.itemMap, "com.innerecho.poptown")
          this.settleDataByDate(res, i, this.itemMap, "com.astroecho.client")
        }

        console.log(this.itemMap)

        const today = new Date()
        const startDate = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 15)

        for(var i = 0; i <= diff; i++) {
          const startDay = new Date(startDate.getTime() + 24 * 60 * 60 * 1000 * i)
          console.log(startDay)
          const year = startDay.getFullYear()
          const month = (startDay.getUTCMonth() + 1)
          const day = startDay.getUTCDate()
          const monthStr = month < 10 ? "0" + month : month
          const dayStr = day < 10 ? ("0" + day) : day
          const date = year + '-' + monthStr  + '-' + dayStr

          if(this.itemMap[date] != undefined) {
            const item = {
              "日期": date,
              "com.client.tarot.android": this.itemMap[date]["com.client.tarot.android"],
              "com.innerecho.poptown": this.itemMap[date]["com.innerecho.poptown"],
              "com.astroecho.client": this.itemMap[date]["com.astroecho.client"],
            }
            this.chartData.rows.push(item)
          }
        }
      })

      dataTodayApi().then(res => {
        console.log(res)
        res.data.deviceRegister.forEach(item => {
          if (item.deviceType == 0) {
            this.andRegister = item.quantity
          } else {
            this.iosRegister = item.quantity
          }
        })
        res.data.deviceActive.forEach(item => {
          if (item.deviceType == 0) {
            this.andActive = item.quantity
          } else {
            this.iosActive = item.quantity
          }
        })
        res.data.register.forEach(item => {
          if (item.userType == 1) {
            this.userNum = item.quantity
          } else {
            this.advisorNum = item.quantity
          }
        })
        res.data.active.forEach(item => {
          if (item.userType == 1) {
            this.userActive = item.quantity
          } else {
            this.advisorActive = item.quantity
          }
        })
        this.active = res.data.active
        this.recharge = res.data.recharge
        this.consume = res.data.consume
        this.order = res.data.order
        res.data.order.forEach(item => {
          if (item.type == 1) {
            this.order1 = item.quantity
          } else if (item.type == 2) {
            this.order2 = item.quantity
          } else if (item.type == 3) {
            this.order3 = item.quantity
          } else if (item.type == 4) {
            this.order4 = item.quantity
          } else if (item.type == 5) {
            this.order5 = item.quantity
          } else if (item.type == 6) {
            this.order6 = item.quantity
          } else {
            this.order7 = item.quantity
          }
        })
      })
    }
  },
  watch: {},
  computed: {}
}
</script>
<style lang="scss" scoped>
.containerDataCore {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  h2 {
    margin-top: 50px;
    color: #333333;
  }
  .card-box {
    padding: 20px;
    padding-bottom: 50px;
  }
  .boxs {
    display: flex;
  }
  .box {
    width: 200px;
    height: 100px;
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    box-shadow: 0 1px 4px 1px #ccc;
    padding: 8px 0 0 10px;
    > span {
      display: inline-block;
      font-size: 16px;
      line-height: 25px;
      font-family: 'Courier New', Courier, monospace;
      color: #333333;
    }
    > span:nth-child(1) {
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 600;
    }
  }
  .pay {
    height: 60px;
  }
  .orderBoxs {
    width: 100% !important;
    display: flex;
  }
  .order {
    width: 300px;
    margin-right: 30px;
    padding: 10px;
    font-size: 17px;
    box-shadow: 0 1px 4px 1px #ccc;
    font-family: 'Courier New', Courier, monospace;
    color: #333333;
    .type {
      line-height: 30px;
    }
  }
}
</style>
